<template>
  <div class="top-bar">
    <div class="back-icon" v-if="backShow" @click="goBack">
      <div></div>
    </div>
    <div class="title align-c" v-if="titleShow">{{title}}</div>
    <slot name='search-input'></slot>
    <slot name='search-his'></slot>
    <slot name='r-btn'></slot>
  </div>
</template>

<script>
  export default {
    props: ['backShow', 'title', 'titleShow']
  }
</script>

<style scoped>
  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: .44rem;
    background: #22272d;
  }

  .top-bar .back-icon {
    position: absolute;
    top: 0;
    left: .02rem;
    width: .44rem;
    height: .44rem;
  }

  .top-bar .back-icon > div {
    width: .12rem;
    height: .22rem;
    margin: .11rem auto;
    background: url("../../assets/back.png") no-repeat 0/100% 100%;
  }

  .top-bar .title {
    font-size: .2rem;
    color: #fff;
    line-height: .44rem;
  }
</style>
